<template>
  <div class="payment-log">
    <header id="header" class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">账目明细</h1>
    </header>
    <scroller :on-infinite="infinite" :on-refresh="refresh" ref="my_scroller" class="mui-content">
      <div class="content">
        <div class="list-item mui-row" v-for="item in paymentData">
          <div class="mui-col-sm-10 mui-col-xs-10">
            <div class="payment-type">{{trPaymentType(item)}}</div>
            <div class="payment-time">{{trTime(item)}}</div>
          </div>
          <div class="mui-col-sm-2 mui-col-xs-2 payment-money">
            <div :class="{active:isIncome(item),onlymoney:(item.nideshop_user!=1&&item.sys_user!=1)}" class="money">{{isIncome(item)? '+'+item.remit_fee:'-'+item.remit_fee}}</div>
            <span class="mui-badge" :class="trRemitClass(item)" v-if="item.nideshop_user==1||item.sys_user==1">{{trRemitStatus(item)}}</span>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        page:1,
        size:10,
        totalPages:1,
        paymentData:[],
      }
    },
    methods:{
      //获取转账记录数据
      getPaymentLog(){
        var that = this;
        return new Promise(function (resolve, reject) {
          if (that.totalPages <= that.page - 1) {
            return reject("没有更多数据");
          }
          that.$http.post(that.$http.adornUrl(that.$api.getRemitLog), {
            page:that.page,
            size:that.size,
          }).then(function(res){
            mui.toast(res.errmsg);
            if(res.errno == 0){
              that.paymentData=that.paymentData.concat(res.data.data);
              that.page=res.data.currentPage + 1;
              that.totalPages=res.data.totalPages;
              resolve();
            }else{
              reject("执行失败请重试");
            }
          }).catch(function (err) {
            console.log(err);
            reject("执行失败请重试");
          });
        })
      },
      //转账类型格式化
      trPaymentType(p){
        var that = this,text = '转账';
        switch(p.remit_type)
        {
          case 1:
            text = '签到购物劵转账';
            break;
          case 2:
            text = '笑笑购物劵转账';
            break;
          default:
            text = '转账';
        }
        text = text + (that.isIncome(p)?'来自'+p.sys_name:'至'+p.nideshop_name);
        return text;
      },
      //转账状态格式化
      trRemitStatus(p){
        var text = '处理中';
        switch(p.remit_status)
        {
          case 0:
            text = '受理中';
            break;
          case 1:
            text = '汇款中';
            break;
          case 2:
            text = p.nideshop_user==1?'已汇款':'完成';
            break;
          case 3:
            text = '失败';
            break;
          default:
            text = '处理中';
        }
        return text;
      },
      //格式化转账状态类
      trRemitClass(p){
        var cla = 'mui-badge-warning';
        switch(p.remit_status)
        {
          case 0:
            cla = 'mui-badge-primary';
            break;
          case 1:
            cla = 'mui-badge-purple';
            break;
          case 2:
            cla = 'mui-badge-success';
            break;
          case 3:
            cla = 'mui-badge-danger';
            break;
          default:
            cla = 'mui-badge-warning';
        }
        return cla;
      },
      //时间格式化
      trTime(item){
        var inputTime = item.apply_time;
        if(item.remit_time){
          inputTime = item.remit_time;
        }
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
      },
      //判断是否为进账
      isIncome(item){
        var that = this;
        var userId = that.$store.state.user.userInfo.userId;
        if(userId == item.sys_user){
          return false;
        }
        if(userId == item.nideshop_user){
          return true;
        }
      },
      //上拉加载
      infinite(done){
        var that = this;
        that.getPaymentLog().then(function(){
          that.$refs.my_scroller.finishInfinite(2);
        }).catch(function(e){
          mui.toast(e);
          that.$refs.my_scroller.finishInfinite(2);
        });
      },
      //下拉刷新
      refresh(){
        this.$refs.my_scroller.finishPullToRefresh()
      }
    }
  }
</script>

<style scoped lang="less">
  .payment-log{
    .mui-bar{
      background-color: #fff;
      .mui-title{
        font-size: 0.36rem;
      }
    }
    .mui-bar-nav {
      -webkit-box-shadow: 0 1px 6px #e6e6e6;
      box-shadow: 0 1px 6px #e6e6e6;
    }
    .mui-input-group:after{
      height: 0px;
    }
    .mui-input-group:before{
      height: 0;
    }
    .mui-input-group .mui-input-row:after{
      height: 0px;
    }
    .content{
      .list-item{
        display: flex;
        align-items:stretch;
        background: #fff;
        border-bottom: 1px #eee solid;
        padding: 0.25rem 0.3rem;
        .payment-type{
          font-size: 0.33rem;
          line-height: 1;
          font-weight: bold;
        }
        .payment-time{
          font-size: 0.2rem;
          line-height: 1;
          padding-top: 0.2rem;
        }
        .payment-money{
          font-size: 0.2rem;
          .money{
            font-size: 0.35rem;
          }
          .onlymoney{
            height: 0.67rem;
            line-height: 0.67rem;
          }
          .active{
            color:#4cd964;
          }
        }
      }
    }
  }
</style>
